<template>
  <div class="app-container">
    <div class="services-container">
      <div class="services-header">
        <h1>我们的服务</h1>
        <p>百善家政为您提供全方位的家政服务解决方案</p>
      </div>

      <!-- 服务分类标签 -->
      <div class="services-tabs">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="全部服务" name="all"></el-tab-pane>
          <el-tab-pane label="家居清洁" name="cleaning"></el-tab-pane>
          <el-tab-pane label="母婴护理" name="maternity"></el-tab-pane>
          <el-tab-pane label="老人看护" name="elderly"></el-tab-pane>
          <el-tab-pane label="家居维修" name="repair"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 服务列表 -->
      <div class="services-list">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(service, index) in filteredServices" :key="index">
            <el-card class="service-card" shadow="hover">
              <div class="service-image">
                <el-image src="https://via.placeholder.com/350x200" fit="cover"></el-image>
                <div class="service-category">{{ service.category }}</div>
              </div>
              <div class="service-content">
                <h3>{{ service.title }}</h3>
                <div class="service-description">{{ service.description }}</div>
                <div class="service-features">
                  <p v-for="(feature, idx) in service.features" :key="idx">
                    <i class="el-icon-check"></i> {{ feature }}
                  </p>
                </div>
                <div class="service-price">
                  <span class="price">¥{{ service.price }}</span>
                  <span class="unit">{{ service.unit }}</span>
                </div>
                <div class="service-actions">
                  <el-button type="primary" @click="bookService(service)">立即预约</el-button>
                  <el-button type="text" @click="viewServiceDetail(service)">
                    查看详情 <i class="el-icon-arrow-right"></i>
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 服务流程 -->
      <div class="service-process">
        <div class="section-header">
          <h2>服务流程</h2>
          <p>简单四步，轻松享受专业服务</p>
        </div>
        <el-steps :active="4" finish-status="success" align-center>
          <el-step title="在线预约" description="选择您需要的服务类型和时间">
            <i slot="icon" class="el-icon-message"></i>
          </el-step>
          <el-step title="客服确认" description="客服将与您联系确认服务细节">
            <i slot="icon" class="el-icon-phone-outline"></i>
          </el-step>
          <el-step title="专业服务" description="专业人员上门提供服务">
            <i slot="icon" class="el-icon-s-custom"></i>
          </el-step>
          <el-step title="服务评价" description="对服务进行评价和反馈">
            <i slot="icon" class="el-icon-star-on"></i>
          </el-step>
        </el-steps>
      </div>

      <!-- 服务保障 -->
      <div class="service-guarantee">
        <div class="section-header">
          <h2>服务保障</h2>
          <p>我们的承诺，您的放心之选</p>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="(guarantee, index) in guarantees" :key="index">
            <div class="guarantee-item">
              <div class="guarantee-icon">
                <i :class="guarantee.icon"></i>
              </div>
              <h3>{{ guarantee.title }}</h3>
              <p>{{ guarantee.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 常见问题 -->
      <div class="service-faq">
        <div class="section-header">
          <h2>常见问题</h2>
          <p>解答您关心的问题</p>
        </div>
        <el-collapse v-model="activeFaq">
          <el-collapse-item v-for="(faq, index) in faqs" :key="index" :title="faq.question" :name="index">
            <div>{{ faq.answer }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 预约咨询 -->
      <div class="service-contact">
        <div class="contact-box">
          <div class="contact-text">
            <h3>需要帮助或有任何疑问？</h3>
            <p>我们的客服团队随时为您提供专业咨询</p>
          </div>
          <div class="contact-action">
            <el-button type="primary" size="large" @click="contactUs">立即咨询</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CompanyServices",
  data() {
    return {
      activeTab: "all",
      activeFaq: [],
      services: [
        {
          id: 1,
          title: "基础家居保洁",
          category: "家居清洁",
          categoryKey: "cleaning",
          description: "专业的日常家居清洁服务，让您的家居环境始终保持整洁舒适。",
          features: ["客厅清洁", "卧室整理", "厨房清洁", "卫生间消毒"],
          price: 100,
          unit: "起/次",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 2,
          title: "深度家居保洁",
          category: "家居清洁",
          categoryKey: "cleaning",
          description: "针对久未清洁或特殊场合的深度清洁服务，恢复家居环境的整洁与舒适。",
          features: ["家具深度除尘", "地板深度清洁", "厨房油污清除", "卫浴设备除垢"],
          price: 300,
          unit: "起/次",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 3,
          title: "专业月嫂服务",
          category: "母婴护理",
          categoryKey: "maternity",
          description: "资深月嫂团队，为新妈妈和宝宝提供专业的月子护理服务。",
          features: ["产妇护理", "新生儿护理", "月子餐制作", "产后恢复指导"],
          price: 8000,
          unit: "起/月",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 4,
          title: "育儿嫂服务",
          category: "母婴护理",
          categoryKey: "maternity",
          description: "专业的育儿嫂服务，为0-3岁婴幼儿提供科学的照料和早教指导。",
          features: ["日常照料", "辅食制作", "早教启蒙", "生活习惯培养"],
          price: 6000,
          unit: "起/月",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 5,
          title: "老人日常陪护",
          category: "老人看护",
          categoryKey: "elderly",
          description: "为老年人提供细致、耐心的生活照料和情感陪伴服务。",
          features: ["生活起居照料", "情感陪伴", "户外活动陪同", "服药提醒"],
          price: 4000,
          unit: "起/月",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 6,
          title: "病患陪护",
          category: "老人看护",
          categoryKey: "elderly",
          description: "为行动不便或有特殊需求的老人提供专业的陪护服务。",
          features: ["专业护理", "日常照料", "康复训练辅助", "心理疏导"],
          price: 200,
          unit: "起/天",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 7,
          title: "小型家电维修",
          category: "家居维修",
          categoryKey: "repair",
          description: "提供小型家电维修服务，解决家庭日常用电问题。",
          features: ["电器故障排查", "简单零件更换", "使用指导", "维护保养建议"],
          price: 100,
          unit: "起/次",
          image: "https://via.placeholder.com/350x200"
        },
        {
          id: 8,
          title: "水电维修",
          category: "家居维修",
          categoryKey: "repair",
          description: "解决家庭水电问题，保障家居生活安全。",
          features: ["水管维修", "电路检修", "水龙头更换", "插座更换"],
          price: 150,
          unit: "起/次",
          image: "https://via.placeholder.com/350x200"
        }
      ],
      guarantees: [
        {
          title: "专业保障",
          icon: "el-icon-medal",
          description: "所有服务人员均经过专业培训，持证上岗"
        },
        {
          title: "安全保障",
          icon: "el-icon-lock",
          description: "服务人员背景调查，购买保险，保障您的家居安全"
        },
        {
          title: "品质保障",
          icon: "el-icon-trophy",
          description: "服务不满意，可申请重新服务或部分退款"
        },
        {
          title: "价格保障",
          icon: "el-icon-money",
          description: "透明定价，无隐形消费，明码标价"
        }
      ],
      faqs: [
        {
          question: "如何预约家政服务？",
          answer: "您可以通过我们的网站、电话或微信公众号预约服务。在网站上选择您需要的服务类型、日期和时间，填写相关信息后提交即可。我们的客服人员会在24小时内与您联系确认详情。"
        },
        {
          question: "服务人员是否经过专业培训？",
          answer: "是的，我们所有的服务人员都经过严格筛选和专业培训，持证上岗。我们会定期对服务人员进行技能培训和服务礼仪培训，确保服务质量。"
        },
        {
          question: "如果对服务不满意怎么办？",
          answer: "如果您对我们的服务不满意，可以在服务结束后24小时内联系我们的客服中心。我们会根据具体情况安排重新服务或给予一定的退款。"
        },
        {
          question: "服务费用如何计算？",
          answer: "我们的服务费用根据服务类型、时长和难度等因素计算。在您预约服务时，系统会根据您选择的服务内容自动计算费用，并显示明确的价格。所有费用透明公开，无隐形消费。"
        },
        {
          question: "可以指定同一位服务人员长期提供服务吗？",
          answer: "可以的。如果您对某位服务人员的服务特别满意，可以在预约时备注或联系客服指定该服务人员。我们会尽量安排，但可能受到服务人员档期的影响。"
        }
      ]
    };
  },
  computed: {
    filteredServices() {
      if (this.activeTab === "all") {
        return this.services;
      } else {
        return this.services.filter(service => service.categoryKey === this.activeTab);
      }
    }
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab.name);
    },
    bookService(service) {
      // 跳转到预约页面，并传递服务信息
      this.$router.push({
        path: '/company/reservation',
        query: { 
          category: service.categoryKey,
          type: service.id
        }
      });
    },
    viewServiceDetail(service) {
      this.$message.info(`查看"${service.title}"详情`);
      // 这里可以添加查看服务详情的逻辑
    },
    contactUs() {
      this.$message.success("我们的客服将很快与您联系，感谢您的咨询！");
      // 这里可以添加联系客服的逻辑
    }
  }
};
</script>

<style scoped>
.services-container {
  padding-bottom: 40px;
}

.services-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background: linear-gradient(to right, #1890ff, #36cfc9);
  color: white;
  border-radius: 4px;
}

.services-header h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.services-tabs {
  margin-bottom: 30px;
}

.service-card {
  margin-bottom: 30px;
  height: 100%;
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.service-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-category {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #1890ff;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.service-content {
  padding: 20px;
}

.service-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.service-description {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.service-features {
  margin-bottom: 20px;
}

.service-features p {
  margin: 5px 0;
  color: #666;
}

.service-features i {
  color: #1890ff;
  margin-right: 5px;
}

.service-price {
  margin-bottom: 20px;
}

.price {
  font-size: 24px;
  color: #f56c6c;
  font-weight: bold;
}

.unit {
  font-size: 14px;
  color: #999;
  margin-left: 5px;
}

.service-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 50px;
}

.section-header h2 {
  font-size: 28px;
  color: #1890ff;
  margin-bottom: 10px;
}

.section-header p {
  color: #666;
}

.service-process {
  margin: 60px 0;
}

.service-guarantee {
  padding: 40px 0;
  background-color: #f8f8f8;
  margin: 60px 0;
}

.guarantee-item {
  text-align: center;
  padding: 20px;
}

.guarantee-icon {
  font-size: 48px;
  color: #1890ff;
  margin-bottom: 15px;
}

.guarantee-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.guarantee-item p {
  color: #666;
}

.service-faq {
  margin: 60px 0;
}

.service-contact {
  margin-top: 60px;
}

.contact-box {
  background: linear-gradient(to right, #1890ff, #36cfc9);
  padding: 40px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}

.contact-text h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-text p {
  font-size: 16px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .contact-box {
    flex-direction: column;
    text-align: center;
  }
  
  .contact-action {
    margin-top: 20px;
  }
}
</style> 